<template>
   <div :class="[sendReceive === 1 ? 'global-bonus-me':'global-bonus-user']">
    <span class="global-message" v-html="httpHtml" />
  </div>
</template>

<script>
//红包消息文本提示
export default {
  props: ['info', 'id'],
  computed: {
    httpHtml: function () {
      return '收到红包，请在手机上查看'
    },
    sendReceive: function () {
      return this.info.isMe ? 1 : 0
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
    display: inline-flex;
    align-items: center;
    margin: 0 10px 10px 0;
  }
//红包提示样式
.global-bonus-me,
.global-bonus-user{
  word-break: break-word;
	font-size: 14px;
	border-radius: 20px;
	.global-message {
	  display: inline-block;
	  white-space: pre-wrap;
	  word-wrap: break-word;
	  text-align: left;
	  font-size: 13px;
	}
}

.global-bonus-me {
  padding: 8px;
  max-width: 370px;
  color: #8F8F8F;
  font-weight: 300;
  display: inline-block;
}

.global-bonus-user {
  padding: 8px;
  max-width: 370px;
  color: #8F8F8F;
  font-weight: 300;
  display: inline-block;
}
</style>
